/*
 * @Description:
 * @Author: fhw
 * @Date: 4023-01-31 11:31:09
 */
import { FormUpload } from '@/components'
import { OssData } from '@/components/upload'
import UserImg from '@/components/user/userImg'
import { User } from '@/interface'
import { BasicDataModule } from '@/store/modules/basicData'
import { errorTips, successTips } from '@/utils'
import { isTrue } from '@/utils/tools'
import { clone } from 'ramda'
import { defineComponent, onMounted, ref, watchEffect } from 'vue'
import './style.scss'
const rules = {}
export default defineComponent({
	name: 'PersonalCenter',
	setup() {
		const antdForm = ref<AntdFrom>()
		const pageState = ref({
			loading: false,
		})
		onMounted(() => {
			// 获取用户详情
			if (!isTrue(BasicDataModule.userInfo)) {
				BasicDataModule.getUserInfo()
			}
		})
		const userInfo = ref<User>({})
		watchEffect(() => {
			if (isTrue(BasicDataModule.userInfo)) {
				userInfo.value = clone(BasicDataModule.userInfo)
			}
		})
		async function updateChatUser() {
			const params = {
				id: userInfo.value.id,
				username: userInfo.value.username,
				sex: userInfo.value.sex,
				age: userInfo.value.age,
				headimgurl: userInfo.value.headimgurl,
				signature: userInfo.value.signature,
			}
			pageState.value.loading = true
			const { success, msg } = await API.blog.chatUser.updateChatUser.request(params)
			success ? successTips('信息保存成功！') : errorTips(msg)
			pageState.value.loading = false
			BasicDataModule.getUserInfo()
		}
		return () => (
			<div id="personalCenter">
				<h3 class="title">个人信息</h3>
				<section class="personalCenter-section">
					<aside>
						<div class="personalCenter-userImg">
							<FormUpload
								v-slots={{
									text: () => (
										<UserImg
											key="personalCenter-userImg"
											iconSize={200}
											imgSize={200}
											headimgurl={userInfo.value.headimgurl}
										/>
									),
								}}
								onChange={(data: OssData) => {
									if (!data.url) {
										errorTips('上传失败，请联系管理员处理')
										return
									}
									userInfo.value.headimgurl = data.url
								}}
							/>
						</div>
					</aside>
					<main>
						<a-form
							model={pageState.value}
							rules={rules}
							ref={antdForm}
							labelCol={{ span: 6 }}
							wrapperCol={{ span: 15, push: 1 }}
						>
							<a-form-item label="登录账号" name="username">
								{userInfo.value.account}
							</a-form-item>
							<a-form-item label="我的昵称" name="username">
								<a-input v-model={[userInfo.value.username, 'value']} maxlength={20} showCount />
							</a-form-item>
							<a-form-item label="我的性别" name="username">
								<a-select v-model={[userInfo.value.sex, 'value']}>
									<a-select-option value={'女'}>女</a-select-option>
									<a-select-option value={'男'}>男</a-select-option>
								</a-select>
							</a-form-item>
							<a-form-item label="个性签名" name="username">
								<a-textarea
									v-model={[userInfo.value.signature, 'value']}
									placeholder="个性签名"
									autosize={{ minRows: 4, maxRows: 4 }}
									rows={4}
									showCount
								/>
							</a-form-item>
							<a-form-item wrapperCol={{ push: 7 }}>
								<a-button type="primary" onClick={updateChatUser} loading={pageState.value.loading}>
									保存信息
								</a-button>
							</a-form-item>
						</a-form>
					</main>
				</section>
			</div>
		)
	},
})
